<template>
    <div class="personOrder">
        <!-- 散客预约 -->
        <van-notice-bar color="#ffffff" background="#F17F2A" left-icon="underway-o">
            <p class="notice">
                <span>请在30分钟内完成支付</span>
                <span>剩余：{{minutes}}分{{seconds}}秒</span>
            </p>
        </van-notice-bar>
        <div class="info">
            <div class="image">
                <img src="../../../../static/img/menpiao.png" alt="">
            </div>
            <div class="right">
                <p class="title">天士力大健康城参观门票</p>
                <p class="date">
                    参观日期：{{info.t_date}}
                </p>
                <p class="time">
                    参观时段：{{info.time_period}}
                </p>
            </div>  
        </div>
        <ul class="detail" v-for="(item, index) in info.item" :key="index">
            <li class="li" v-for="(i, index) in item.tickets" :key="index" v-show="i.nums>0">
                <span>{{i.ticket_name}}：<span class="discount">¥ {{i.discount_price}}</span></span> 
                <span>x {{i.nums}}</span>
            </li>
            <li class="li" v-if="info.child_count">
                <span>随行儿童：</span> 
                <span>{{info.child_count}}</span>
            </li>
            <li class="li licou" v-show="parseFloat(info.yh_price)>0">
                <span>已使用优惠券抵扣{{parseFloat(info.yh_price)}}元</span> 
                <span class="discount">-¥ {{parseFloat(info.yh_price)}}</span>
            </li> 
            <li class="total">
                合计金额：<span class="money"> ¥ {{info.order_amount}}</span>
            </li>
        </ul>
        <div class="pay">
            <div class="payBtn" @click="goSuccess">
                立即支付
            </div>
        </div>
    </div>
</template>

<script>
    import { perOrderDetail, payTicket, perOrderStatus } from '../../../http/interface'
    import wx from 'weixin-js-sdk'
import { Session } from '../../../assets/js/utils'
    export default {
        name: '',
        data() {
            return {
                radio: 1,
                show: false,
                torder_id: '',
                add_time: '',
                info: {},
                minutes: '',
                seconds: '',
                countTimer: null,
                loopTimer: null,
                score: null
            }
        },
        mounted() {
            this.torder_id = this.$route.query.orderId
            this.score = this.$route.query.score
            this.initData()
        },
        beforeDestroy() {
            this.clearTimeCount()
            this.clearLoopOrder()
        },
        methods: {
            async goSuccess() {
                try {
                    const res = await payTicket(this.torder_id, 2)
                    if(res.status == 1) {
                        if(!this.loopTimer) {
                            this.loopTimer = setInterval(() => {
                                this.orderStatusLoop()
                            }, 1e3)
                        }
                        let mini = res.data.wxpayinfo
                        if(mini.appId&&mini.timeStamp&&mini.nonceStr&&mini.package&&mini.signType&&mini.paySign) {
                            let path = `/pages/pay/index?appId=${mini.appId}&timeStamp=${mini.timeStamp}&nonceStr=${mini.nonceStr}&package=${encodeURIComponent(mini.package)}&signType=${mini.signType}&paySign=${encodeURIComponent(mini.paySign)}`;
                            wx.miniProgram.navigateTo({
                                url: path
                            })
                        }
                    }else {
                        this.$toast(res.msg)
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            async initData() {
                try {
                    const res = await perOrderDetail(this.torder_id)
                    if(res.status == 1) {
                        this.add_time = res.data.add_time
                        this.info = res.data
                        if(this.info.order_status!=2) {
                            if (res.data.order_status == 3) {
                                this.$router.replace({
                                    path: '/success',
                                    query: { 
                                        torder_id: this.torder_id,
                                        type: 1,
                                        score: this.score
                                    }
                                });
                            } else {
                                // 其他情况得跳入订单详情页
                            }
                        }else {
                            this.time(this.add_time)
                        }
                    }else {
                        this.$toast(res.msg)
                    }
                } catch (error) {
                }
            },
            async orderStatusLoop() {
                try {
                    const res = await perOrderStatus(this.torder_id)
                    if(res.status == 1) {
                        //1待审核，2待付款，3已完成（已付款），5已取消，6已退款
                        if (res.data.order_status != 2) {
                            if (res.data.order_status == 3) {
                                //支付成功清理缓存
                                this.removeSession()
                                this.$router.replace({
                                    path: '/success',
                                    query: { 
                                        torder_id: this.torder_id,
                                        type: 1
                                    }
                                });
                            } else {
                                //用户未支付系统自动取消
                                // v.$router.replace({ path: '/pw/person/order_detail', query: { 'torder_id': this.torder_id } });
                            }
                        }
                    }else {

                    }
                } catch (error) {
                }
                // per_order_status
            },
            time(timeval) {
                let v = this
                let time = new Date(timeval.replace(new RegExp("-", "gm"), "/")).getTime()
                let now = new Date().getTime()
                if ((now - time) < 30*60*1000) {
                    let timeDown = () => {
                        let now = new Date().getTime()
                        let leftTime = 1800000 - (now - time);
                        let mm = parseInt(leftTime / 1000 / 60 % 60, 10);
                        let ss = parseInt(leftTime / 1000 % 60, 10);
                        v.minutes = mm < 10 ? ('0' + mm) : mm;
                        v.seconds = ss < 10 ? ('0' + ss) : ss;
                        if (parseInt(v.minutes) <= 0 && parseInt(v.seconds) <= 0) {
                            v.clearTimeCount()
                            this.$dialog.alert({
                                title: '提示',
                                message: '您的订单超时未支付，请重新购票',
                            }).then(() => {
                                v.$router.replace('/personTicket');
                            });
                            return;
                        }
                        return timeDown;
                    }
                    if (!v.countTimer) {
                        v.countTimer = setInterval(timeDown(), 1e3)
                    }
                }else {
                    this.$dialog.alert({
                        title: '提示',
                        message: '您的订单超时未支付，请重新购票',
                    }).then(() => {
                        v.$router.replace('/personTicket');
                    });
                }
            },
            clearTimeCount() {
                if (this.countTimer) { //如果定时器在运行则关闭
                    window.clearInterval(this.countTimer);
                    this.countTimer = null;
                }
            },
            clearLoopOrder() {
                if (this.loopTimer) { //如果定时器在运行则关闭
                    window.clearInterval(this.loopTimer);
                    this.loopTimer = null;
                }
            },
            removeSession() {
                let keyArr = [
                    'person_tp_list',
                    'person_tickets_list',
                    'person_tp_id',
                    'preson_td_id'
                ]
                keyArr.forEach(e => {
                    Session.remove(e)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../style/mixin.scss";
    .personOrder{
        width: 100vw;
        min-height: 100vh;
        background: #EEEEEE;
        // padding-bottom: 704px;
        display: flex;
        flex-direction: column;
        /deep/ .van-notice-bar__content{
            width: 100%;
            .notice{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }
        .info{
            width: 100%;
            // height: 264px;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 40px;
            border-bottom-left-radius: 24px;
            border-bottom-right-radius: 24px;
            .image{
                width: 280px;
                height: 210px;
                // background: yellow;
                margin-right: 30px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                flex: 1;
                .title{
                    font-size:32px;
                    font-weight:500;
                    color:rgba(50,50,50,1);
                    line-height: 1.5;
                    margin-bottom: 20px;
                    @include ellipsis(2);
                }
                .date,.time{
                    font-size:28px;
                    font-weight:400;
                    color:rgba(50,50,50,1);
                    line-height: 48px;
                }
            }
        }
        .detail{
            width: 100%;
            // height: 380px;
            margin-top: 20px;
            background: #ffffff;
            border-radius: 24px;
                padding: 0 48px;
            .li{
                height: 85px;
                line-height: 85px;
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                display: flex;
                justify-content: space-between;
                &.licou{
                    border-top: 1px solid #EEEEEE;
                    border-bottom: 1px solid #EEEEEE;
                }
                .discount{
                    color: #E10028;
                }
            }
            .coupon{
                height: 104px;
                padding: 0 40px;
                border-top: 1px solid #EEEEEE;
                border-bottom: 1px solid #EEEEEE;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .radioBox{
                    height: 100%;
                    display: flex;
                    align-items: center;
                    .radio{
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        font-size: 18px;
                        background: #DFDFDF;
                        color: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 29px;
                        &.check{
                            background: #F17F2A;
                            animation: smallToBig .2s;
                        }
                    }
                    .title{
                        font-size:30px;
                        font-weight:500;
                        color:rgba(50,50,50,1);
                        line-height: 85px;
                    }
                    // /deep/ .van-radio{
                    //     height: 100%;
                    // }
                }
                .radioSpan{
                    font-size: 30px;
                    line-height: 104px;
                    max-width: 560px;
                    display: inline-block;
                    @include ellipsis(1);
                }
                .more{
                    width: 36px;
                    height: 36px;
                    display: inline-block;
                    background: url('../../../../static/img/zanwugengduo.png') no-repeat center center;
                    background-size: 100% 100%;
                }
            }
            .total{
                height: 103px;
                display: flex;
                justify-content: flex-end;
                font-size:32px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height:103px;
                // padding: 0 40px;
                .money{
                    color: #E10028;
                }
            }
        }
        .pay{
            width: 100%;
            background: #ffffff;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            min-height: 350px;
            .payBtn{
                width:520px;
                height:84px;
                background: #F17F2A;
                border-radius:42px;
                font-size:36px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:84px;
                text-align: center;
            }
        }
        // .couponBox{
        //     width: 100%;
        //     max-height: 664px;
        //     background: #ffffff;
        //     position: absolute;
        //     bottom: 0;
        //     &.in{
        //         animation: fadeInUpBig;
        //         animation-duration: .7s;
        //     }
        //     .header{
        //         width: 100%;
        //         height: 116px;
        //         padding: 0 24px;
        //         display: flex;
        //         justify-content: space-between;
        //         align-items: center;
        //         .header_name{
        //             font-size:32px;
        //             font-weight:500;
        //             color:rgba(50,50,50,1);
        //             line-height:32px;
        //             border-left: 3px solid #F28000;
        //             text-indent: 21px;
        //         }
        //         .explain{
        //             font-size:28px;
        //             font-weight:400;
        //             color:rgba(50,50,50,1);
        //             line-height:116px;
        //         }
        //     }
        //     .coupons{
        //         height: 664px - 116px;
        //         padding: 0 30px;
        //         overflow-y: auto;
        //         .coupon{
        //             width: 100%;
        //             height: 202px;
        //             background: url('../../../../static/img/youhuiquan.png') no-repeat left center;
        //             background-size: 254px 202px;
        //             margin-bottom: 30px;
        //             border: 2px dashed #FC6F59;
        //             border-left: none;
        //             display: flex;
        //             .left{
        //                 width: 254px;
        //                 height: 100%;
        //                 padding: 33px 0;
        //                 text-align: center;
        //                 // background: yellowgreen;
        //                 .money{
        //                     font-size: 28px;
        //                     color: #ffffff;
        //                     line-height: 100px;
        //                     span{
        //                         font-size: 64px;
        //                     }
        //                 }
        //                 .tip{
        //                     font-size:24px;
        //                     font-weight:500;
        //                     color:rgba(255,255,255,1);
        //                 }
        //             }
        //             .right{
        //                 flex: 1;
        //                 padding: 32px 30px;
        //                 .name{
        //                     font-size:32px;
        //                     font-weight:500;
        //                     color:rgba(50,50,50,1);
        //                 }
        //                 .time{
        //                     font-size:26px;
        //                     font-weight:500;
        //                     color:rgba(50,50,50,1);
        //                     line-height: 82px;
        //                 }
        //                 .remain{
        //                     font-size:24px;
        //                     font-weight:400;
        //                     color:rgba(100,100,100,1);
        //                 }
        //             }
        //             .radioBox{
        //                 width: 80px;
        //                 display: flex;
        //                 justify-content: center;
        //                 align-items: center;
        //                 .radio{
        //                     width: 32px;
        //                     height: 32px;
        //                     border-radius: 50%;
        //                     font-size: 18px;
        //                     background: #DFDFDF;
        //                     color: #ffffff;
        //                     display: flex;
        //                     justify-content: center;
        //                     align-items: center;
        //                     &.check{
        //                         background: #F17F2A;
        //                         animation: smallToBig .2s;
        //                     }
        //                 }
        //                 @keyframes smallToBig {
        //                     0% {
        //                         transform:scale(0)
        //                     }
        //                 }
        //             }
        //         }   
        //     }
        // }
    }
</style>